<template>
  <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
    <view
      class="item"
      :class="{ active: c3Id == item.id }"
      v-for="item in c3List"
      :key="item.id"
      @tap="$emit('do', item)"
    >
      <view class="text">
        <up-text
          :text="item.name"
          :lines="1"
          color="#ed680e"
          size="22rpx"
          v-if="item.exist"
        ></up-text>
        <up-text
          :text="item.name"
          :lines="1"
          color="gray"
          size="22rpx"
          v-else
        ></up-text>
        <view
          :class="[
            'v-pad',
            { bot: c3Id == item.id },
            { exist: item.id == c3Id && item.exist },
            { notexist: item.id == c3Id && !item.exist }
          ]"
        ></view>
      </view>
    </view>
    <view class="padding"></view>
  </scroll-view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps(['c3List', 'c3Id'])
</script>

<style lang="scss" scoped>
.padding {
  display: inline-block;
  width: 30rpx;
}
.scroll-view_H {
  // overflow: hidden;
  padding-left: 20rpx;
  white-space: nowrap;
  width: 100%;
  border-bottom: 1rpx solid #dedada;
  height: 60rpx;
  line-height: 60rpx;
  .item {
    display: inline-block;
    text-align: center;
    font-size: 24rpx;
    color: #bfb6b6;
    margin-right: 15rpx;
    .text {
      position: relative;

      .v-pad {
        position: absolute;
        background: gray;
        &.bot {
          bottom: 0;
          left: 0;
          height: 12rpx;
          border-top-left-radius: 4rpx;
          border-top-right-radius: 4rpx;
          width: 100%;
          &.exist {
            background: #ed680e;
          }
          &.notexist {
            background: grey;
          }
        }
      }
    }
  }
  .active {
    color: black;
    font-weight: 600;
  }
}
</style>
